/* ═══════════════════════════════════════════════════════════
   TIMELABS DESIGN TOKENS  —  extracted from /hr-software-india
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --tl-navy:       #001659;   /* hero bg, nav bg                */
  --tl-navy-dark:  #071428;   /* deeper hero section             */
  --tl-navy-mid:   #001659;   /* section separators, cards       */
  --tl-teal:       #ff9e2c;   /* primary CTA green               */
  --tl-teal-dark:  #006FFA;   /* CTA hover                       */
  --tl-teal-light: #fff6eb;   /* teal tint backgrounds           */
  --tl-orange:     #ff6b35;   /* accent / highlight numbers      */
  --tl-yellow:     #ffc107;   /* stars, badges                   */
  --tl-white:      #ffffff;
  --tl-off-white:  #f8f9fb;   /* section backgrounds             */
  --tl-light-gray: #eef1f6;   /* borders, subtle bg              */
  --tl-mid-gray:   #9ba8bc;   /* muted text                      */
  --tl-body-text:  #2d3a4a;   /* body copy                       */
  --tl-heading:    #0f4f93;   /* dark headings on white          */

  /* Typography — Nunito Sans (matches timelabs pages) */
  --font-body: "Poppins", sans-serif !important;
  --font-head: "Poppins", sans-serif !important;

  /* Spacing */
  --r: 8px; --r2: 14px; --r3: 22px; --r4: 32px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(11,31,58,.08);
  --sh:    0 6px 24px rgba(11,31,58,.12);
  --sh-lg: 0 16px 48px rgba(11,31,58,.16);
}

/* ─── RESET + BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font-body);
  color: var(--tl-body-text);
  background: var(--tl-white);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.2; color: var(--tl-heading) }
a { text-decoration: none; color: inherit }
img { max-width:100%; display:block }
ul { list-style:none }

/* ─── LAYOUT ────────────────────────────────────────────── */
.container { max-width: 1380px; margin: 0 auto; padding: 0 24px }
.section-pad { padding: 72px 0 }
.section-pad-sm { padding: 48px 0 }

/* ─── TYPOGRAPHY HELPERS ────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tl-teal);
  margin-bottom: 14px;
}
.eyebrow::before {
  content:''; width:18px; height:2px;
  background: var(--tl-teal); border-radius:2px;
}
.section-title {
  font-size: clamp(1.65rem, 3.2vw, 3.7rem) !important;
  font-weight: 600; color: var(--tl-heading) !important;
  margin-bottom: 14px;
  margin-top:0px;
  line-height:normal;
}
.section-title span { color: var(--tl-teal) }
.section-sub {
  font-size: 18px; color: #5a6a80;
  max-width: 560px; line-height:1.7;
}
.center-text { text-align: center }
.center-text .section-sub { margin: 0 auto }

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--font-body);
  font-weight: 600; font-size: 14px; border-radius: var(--r2);
  cursor: pointer; transition: all .18s; border: none;
  white-space: nowrap; line-height:1; padding: 13px 26px;
}
.btn-primary {
  background: var(--tl-teal); color: var(--tl-white);
  box-shadow: 0 4px 16px rgba(0,197,163,.3);
}
.btn-primary:hover { background: var(--tl-teal-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,197,163,.4) }
.btn-primary-lg { padding: 15px 32px; font-size: 15px; border-radius: var(--r3) }
.btn-outline {
  background: transparent; color: var(--tl-teal);
  border: 2px solid var(--tl-teal);
}
.btn-outline:hover { background: var(--tl-teal-light) }
.btn-ghost-white {
  background: rgba(255,255,255,.1); color: var(--tl-white);
  border: 1.5px solid rgba(255,255,255,.25);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.8) }
.btn-navy {
  background: var(--tl-navy); color: var(--tl-white);
  border: 1.5px solid rgba(255,255,255,.1);
}
.btn-navy:hover { background: var(--tl-navy-mid) }
.btn-gold {
  background: #e6960a; color: var(--tl-white);
  box-shadow: 0 4px 16px rgba(230,150,10,.3);
}
.btn-gold:hover { background: #d08a07; transform:translateY(-1px) }

/* ─── HEADER / NAV  (matches timelabs header exactly) ───── */
header {
  background: #0c112f;
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 68px; gap: 20px;
}
.logo-wrap {
  display: flex; align-items: center; gap: 0;
  flex-shrink: 0;
}
.logo-wrap img {
  height: 38px; width: auto;
  /* use real Timelabs SVG logo */
  filter: brightness(0) invert(1); /* white version on dark bg */
}
/* Fallback text logo if SVG doesn't render */
.logo-text {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 700;
  color: var(--tl-white);
  letter-spacing: -0.5px;
}
.logo-text span { color: var(--tl-teal) }
.nav-right {
  display: flex; align-items: center; gap: 28px;
}
.nav-links {
  display: flex; align-items: center; gap: 24px;
}
.nav-links a {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.65);
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--tl-white) }
.nav-support {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--tl-white);
  text-decoration: none;
}
.nav-support-icon { width: 18px; height: 18px; opacity:.85 }
.nav-demo-btn { padding: 10px 22px; font-size: 13px }

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
    background-image: url(../images/connectbg.jpg);
    background-size: cover;
    background-position: center center;
    padding: 120px 0 56px;
    position: relative;
    overflow: hidden;
}
/* Timelabs-style background circles */
.hero-bg-circle {
  position: absolute; border-radius: 50%;
  background: rgba(0,197,163,.07);
  pointer-events: none;
}
.hero-bg-circle-1 { width:500px; height:500px; top:-180px; right:-100px }
.hero-bg-circle-2 { width:320px; height:320px; bottom:-120px; left:5%; background:rgba(0,197,163,.05) }
.hero-content { position:relative; z-index:1 }
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,197,163,.12);
  border: 1px solid rgba(0,197,163,.25);
  color: var(--tl-teal); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px; margin-bottom: 0px;
}
.hero-badge-dot { width:7px; height:7px; border-radius:50%; background:var(--tl-teal); animation: pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 4.2rem);
  font-weight: 700; color: var(--tl-white);
  line-height: 58px; margin-bottom: 18px;
}
.hero h1 em { color: var(--tl-teal); font-style: normal }
.hero-sub {
  font-size: 24px; color: rgba(255,255,255);
  line-height: 1.7; margin-bottom: 28px;
  max-width:87%;
  font-weight:500;
}
.hero-checks {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px;
}
.hero-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85);
}
.check-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tl-teal); display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 11px; color:#fff; font-weight:700;
}
.hero-ctas {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat-val {
  font-family: var(--font-head);
  font-size: 2.4rem; font-weight: 700; color: var(--tl-white);
  display: block; line-height: 1;
}
.hero-stat-label {
  font-size: 12px; color: rgba(255,255,255,.66);
  margin-top: 4px; display: block;
}

/* ─── PRICING CARD (the form box on hero) ───────────────── */
.hero-price-card {
  background: var(--tl-white);
  border-radius: var(--r4);
  padding: 32px 28px;
  box-shadow: var(--sh-lg);
  position: relative;
}
.hero-price-card::before {
  content: 'Plans from ₹65/employee';
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--tl-teal);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 16px; border-radius: 99px; white-space:nowrap;
}
.hero-price-card h3 {
  font-size: 18px; font-weight: 600; color: var(--tl-heading);
  margin-bottom: 5px; text-align: center; margin-top:4px;
}
.hero-price-card .sub { font-size:12px; color:#6b7a90; text-align:center; margin-bottom:13px }
.billing-toggle {
  display: flex; background: var(--tl-light-gray);
  border-radius: 99px; padding: 4px;
  margin-bottom: 7px;
}
.billing-opt {
  flex: 1; text-align: center; padding: 8px 12px;
  font-size: 12px; font-weight: 700; border-radius: 99px;
  cursor: pointer; transition: all .2s;
  color: var(--tl-mid-gray); user-select:none;
  white-space:nowrap;
}
.billing-opt.active {
  background: var(--tl-white); color: var(--tl-heading);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.save-pill {
  font-size: 12px; background: var(--tl-teal); color:#fff;
  padding:2px 6px; border-radius:99px; font-weight:700;
  letter-spacing:.04em; vertical-align:middle; margin-left:4px;
}
.mini-plans { display:flex; flex-direction:column; gap:8px; margin-bottom:20px }
.mini-plan {
  border: 1.5px solid var(--tl-light-gray);
  border-radius: var(--r2); padding: 12px 14px;
  cursor: pointer; transition: all .18s;
  display: flex; align-items: center; justify-content: space-between; gap:10px;
}
.mini-plan:hover { border-color: var(--tl-teal); background: var(--tl-teal-light) }
.mini-plan.selected { border-color: var(--tl-teal); background: var(--tl-teal-light) }
.mini-plan-left { display:flex; flex-direction:column; gap:2px }
.mini-plan-name { font-size:13px; font-weight:600; color:var(--tl-heading) }
.mini-plan-desc { font-size:11px; color:#6b7a90 }
.mini-plan-price { text-align:right }
.mini-plan-amt { font-size:15px; font-weight:700; color:var(--tl-teal); font-family:var(--font-head) }
.mini-plan-per { font-size:10px; color:#9ba8bc; display:block; margin-top:1px }
.mini-plan.featured-plan { border-color:var(--tl-teal) !important; background:rgb(255 246 235) }
.popular-tag {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; background:var(--tl-teal); color:#fff;
  padding:2px 7px; border-radius:99px;
}
.hero-price-ctas { display:flex; flex-direction:column; gap:8px }
.hero-price-ctas .btn { width:100%; justify-content:center }
.trust-micro {
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top:14px; font-size:11px; color:#9ba8bc; flex-wrap:wrap;
}
.trust-micro span { display:flex; align-items:center; gap:4px }

/* ─── LOGO BAR ──────────────────────────────────────────── */
.logo-bar { background: var(--tl-off-white);  border-bottom:1px solid var(--tl-light-gray) }
.logo-bar-inner {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap;
}
.brand-section{position:relative; background: var(--tl-off-white);}
.logo-pill {
  font-size:13px; font-weight:700; color:#6b7a90;
  padding:0 20px; border-right:1px solid var(--tl-light-gray);
  white-space:nowrap;
}
.logo-pill:last-child { border-right:none }

/* ─── COMPETITOR BANNER ─────────────────────────────────── */
.comp-bar { background: var(--tl-navy-mid); padding:18px 0 }
.comp-bar-inner {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap;row-gap:15px;padding:0px;
}
.comp-bar-main {display: flex;flex-wrap: wrap;row-gap: 10px; justify-content: center;}
.comp-stat {
  display:flex; flex-direction:column; align-items:center;
  padding:0 28px; border-right:1px solid rgba(255,255,255,.1);
}
.comp-stat:last-child { border-right:none }
.comp-pct {
  font-family:var(--font-head); font-size:1.8rem; font-weight:700;
  color:var(--tl-teal); line-height:1;
}
.comp-label { font-size:12px; color:rgba(255,255,255,.66); margin-top:3px; text-align:center }
.comp-bar-intro {
  font-size:16px; font-weight:700; color:rgba(255,255,255,.75);
  letter-spacing:.07em; text-transform:uppercase;
  padding-right:28px; border-right:1px solid rgba(255,255,255,.1);
  margin-right:0;
}

/* ─── PLAN CARDS ────────────────────────────────────────── */
.plans-section { background: var(--tl-off-white) }
.plans-grid {
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap:18px; margin-top:40px;
}
.plan-card {
  background: var(--tl-white);
  border:2px solid var(--tl-light-gray);
  border-radius:var(--r3); padding:28px 22px;
  position:relative; transition:all .22s;
}
.plan-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.plan-card.popular {
  border-color:var(--tl-teal);
  box-shadow: 0 0 0 4px rgba(0,197,163,.1), var(--sh);
}
.plan-card.popular::before {
  content:'Most Popular';
  position:absolute; top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--tl-teal); color:#fff;
  font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 16px; border-radius:99px;
  white-space:nowrap;
}
.plan-card.hardware-card {
  border-color:#e6960a;
  background:linear-gradient(160deg,#fffdf5 0%,#fff 100%);
}
.plan-card.hardware-card::before {
  content:'Only in India';
  position:absolute; top:-14px; left:50%;
  transform:translateX(-50%);
  background:#e6960a; color:#fff;
  font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 16px; border-radius:99px;
  white-space:nowrap;
}
.plan-tier {
  font-size:16px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px;
}
.plan-name {
  font-family:var(--font-head); font-size:1.45rem;
  font-weight:600; margin-bottom:6px;
}
.plan-tagline {
  font-size:12px; color:#6b7a90; margin-bottom:20px;
  line-height:1.55; min-height:38px;
}
.plan-price-block {
  margin-bottom:20px; padding-bottom:18px;
  border-bottom:1px solid var(--tl-light-gray);
}
.plan-price-row { display:flex; align-items:baseline; gap:3px }
.plan-amt {
  font-family:var(--font-head); font-size:2rem; font-weight:600;
  color:var(--tl-heading); transition:all .25s;
}
.plan-per-mo { font-size:13px; color:#9ba8bc }
.plan-per-emp {
  font-size:14px; color:#6b7a90; margin-top:5px;
}
.plan-per-emp strong { color:var(--tl-teal); font-weight:600 }
.plan-annual-save {
  font-size:14px; font-weight:700; color:var(--tl-teal);
  margin-top:4px; display:none;
}
.plan-extra { font-size:13px; color:#9ba8bc; margin-top:3px }
.plan-cta {
  display:block; text-align:center;
  padding:12px 20px; border-radius:var(--r2);
  font-weight:600; font-size:13px; cursor:pointer;
  transition:all .18s; margin-bottom:8px; border:none;
  font-family:var(--font-body);
}
.cta-teal  { background:var(--tl-teal); color:#fff; box-shadow:0 3px 12px rgba(0,197,163,.25) }
.cta-teal:hover { background:var(--tl-teal-dark); transform:translateY(-1px);color:#fff; }
.cta-outline-teal { background:transparent; color:var(--tl-teal); border:2px solid var(--tl-teal) }
.cta-outline-teal:hover { background:var(--tl-teal-light) }
.cta-navy { background:var(--tl-navy); color:#fff }
.cta-navy:hover { background:var(--tl-navy-mid);color:#fff; }
.cta-gold { background:#e6960a; color:#fff; box-shadow:0 3px 12px rgba(230,150,10,.25) }
.cta-gold:hover { background:#d08a07; transform:translateY(-1px); color:#fff;}
.plan-cta-note {
  font-size:11px; color:#9ba8bc; text-align:center;
  margin-bottom:18px;
}
.plan-features { display:flex; flex-direction:column; gap:0 }
.plan-feature {
  font-size:12px; color:var(--tl-body-text);
  padding:7px 0; border-bottom:1px solid var(--tl-light-gray);
  display:flex; align-items:flex-start; gap:8px; line-height:1.45;
}
.plan-feature:last-child { border-bottom:none }
.plan-feature.dim { color:#9ba8bc }
.feat-ic {
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600; flex-shrink:0; margin-top:1px;
}
.fi-yes { background:#d6f5ef; color:#00896a }
.fi-no  { background:var(--tl-light-gray); color:#bcc5d0 }
.fi-cap { background:#fff3cd; color:#8a6000 }
.feat-badge {
  font-size:10px; font-weight:700; padding:1px 5px;
  border-radius:3px; background:#fff3cd; color:#8a6000;
  margin-left:auto; flex-shrink:0;
}

/* ─── MICRO PLAN STRIP ──────────────────────────────────── */
.micro-strip {
    background-image: url('../images/teambg.svg');
    border-radius: var(--r3);
    padding: 30px 28px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.micro-strip-text h4 {
  font-size:22px; font-weight:600; color:var(--tl-white); margin-bottom:4px;
}
.micro-strip-text p {
  font-size:16px; color:rgba(255,255,255); line-height:1.5;
}
.micro-strip-price {
  font-family:var(--font-head); font-size:2.5rem;
  font-weight:600; color:var(--tl-teal);
}
.micro-strip-price sup { font-size:.8rem; vertical-align:super }
.micro-strip-price sub { font-size:1.2rem; color:rgba(255,255,255); font-weight:600 }

/* ─── FEATURE TABLE ─────────────────────────────────────── */
.table-section { background:var(--tl-white) }
.feat-table-wrap { overflow-x:auto; border-radius:var(--r2); border:1px solid var(--tl-light-gray); margin-top:40px; box-shadow:var(--sh-sm) }
.feat-table { width:100%; border-collapse:collapse; min-width:680px }
.feat-table thead th {
  padding:14px 16px; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7a90; background:var(--tl-off-white);
  border-bottom:2px solid var(--tl-light-gray); text-align:left;
}
.feat-table thead th.plan-col { text-align:center; min-width:130px }
.feat-table thead th.pop-col {
  background:var(--tl-teal-light);
  color:#00896a; border-bottom:2px solid var(--tl-teal);
}
.feat-table tbody tr.cat-row td {
  background:var(--tl-off-white);
  font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tl-navy);
  padding:10px 16px;
  border-top:2px solid var(--tl-light-gray);
}
.feat-table tbody td {
  padding:10px 16px; border-bottom:1px solid var(--tl-light-gray);
  font-size:12px; color:var(--tl-body-text); vertical-align:middle;
}
.feat-table tbody td.plan-col { text-align:center }
.feat-table tbody td.pop-col { background:rgba(0,197,163,.04); text-align:center }
.feat-table tbody tr:hover td { background:var(--tl-off-white) }
.feat-table tbody tr:hover td.pop-col { background:rgba(0,197,163,.07) }
.feat-table tfoot td {
  padding:14px 16px; background:var(--tl-off-white);
  border-top:2px solid var(--tl-light-gray);
}
.feat-table tfoot td.pop-col { background:var(--tl-teal-light) }
.tck  { color:#00c5a3; font-size:16px; font-weight:900 }
.tx   { color:#cdd5df; font-size:16px }
.tcap { display:inline-block; font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; background:#fff3cd; color:#8a6000 }

/* ─── ROI CALCULATOR ────────────────────────────────────── */
.calc-section { background:var(--tl-off-white) }
.calc-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:flex-start; margin-top:0px;
}
@media(max-width:780px){ .calc-grid { grid-template-columns:1fr } }
.calc-copy .section-title { font-size:clamp(1.65rem,2.8vw,2.7rem) !important }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px }
.stat-box {
  background:var(--tl-white); border-radius:var(--r2);
  padding:16px; border-left:4px solid var(--tl-teal);
  box-shadow:var(--sh-sm);
}
.stat-box.orange { border-left-color:var(--tl-orange) }
.stat-num {
  font-family:var(--font-head); font-size:2.5rem;
  font-weight:600; color:var(--tl-teal); line-height:1;
}
.stat-box.orange .stat-num { color:var(--tl-orange) }
.stat-desc { font-size:14px; color:#6b7a90; margin-top:4px }

.calc-widget {
  background:var(--tl-navy); border-radius:var(--r4);
  padding:32px 28px; box-shadow:var(--sh-lg);
}
.calc-widget h3 {
  font-size:17px; font-weight:600; color:var(--tl-white);
  margin-bottom:24px;
}
.calc-row { margin-bottom:20px }
.calc-lbl {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; font-weight:700;
  color:rgba(255,255,255,.55); margin-bottom:9px;
}
.calc-lbl span { font-size:14px; font-weight:600; color:var(--tl-white) }
input[type=range] {
  width:100%; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px;
  background:rgba(255,255,255,.15); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--tl-teal);
  border:2.5px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,197,163,.5);
}
.results-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin:20px 0 20px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
}
.res-box {
  background:rgba(255,255,255,.07);
  border-radius:var(--r); padding:14px 12px;
}
.res-label {
  font-size:10px; color:rgba(255,255,255,.4);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;
}
.res-val {
  font-family:var(--font-head); font-size:1.3rem;
  font-weight:600; color:var(--tl-white);
}
.res-val.hi { color:var(--tl-teal) }
.calc-cta {
  display:block; width:100%; text-align:center;
  padding:13px; border-radius:var(--r2);
  background:var(--tl-teal); color:#fff;
  font-weight:600; font-size:14px;
  cursor:pointer; transition:all .18s; border:none;
  font-family:var(--font-body);
}
.calc-cta:hover { background:var(--tl-teal-dark) }

/* ─── ADD-ONS ───────────────────────────────────────────── */
.addon-section { background:var(--tl-white) }
.addons-grid {
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-top:40px;
}
.addon-card {
  background:var(--tl-off-white); border:1.5px solid var(--tl-light-gray);
  border-radius:var(--r2); padding:18px 16px;
  transition:all .2s;
}
.addon-card:hover {
  border-color:var(--tl-teal); background:var(--tl-teal-light);
  box-shadow:var(--sh-sm);
}
.addon-icon-wrap {
  width:40px; height:40px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; font-size:18px;
}
.addon-name { font-size:15px; font-weight:600; color:var(--tl-heading); margin-bottom:3px }
.addon-price {
  font-family:var(--font-head); font-size:1.3rem;
  font-weight:600; color:var(--tl-teal); margin-bottom:6px;
}
.addon-desc { font-size:12px; color:#6b7a90; line-height:1.5 }

/* ─── TESTIMONIALS ──────────────────────────────────────── */
.proof-section { background:var(--tl-off-white) }
.testi-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin-top:40px;
}
.testi-card {
  background:var(--tl-white); border-radius:var(--r2);
  border:1px solid var(--tl-light-gray);
  padding:22px 20px; box-shadow:var(--sh-sm);
  min-height:365px;
}
.testi-stars { color:var(--tl-yellow); font-size:14px; letter-spacing:2px; margin-bottom:12px }
.testi-quote {
  font-size:13px; color:var(--tl-body-text);
  line-height:1.7; margin-bottom:18px; font-style:italic;
}
.testi-author { display:flex; align-items:center; gap:12px }
.testi-avatar {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:#fff; flex-shrink:0;
}
.testi-name { font-size:13px; font-weight:600; margin:0px; }
.testi-role { font-size:11px; color:#6b7a90 }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq-section { background:var(--tl-white) }
.faq-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin-top:40px;
}
@media(max-width:720px){ .faq-grid { grid-template-columns:1fr } }
.faq-item {
  border:1.5px solid var(--tl-light-gray);
  border-radius:var(--r2); overflow:hidden;
  background:var(--tl-white);
}
.faq-q {
  padding:16px 18px; font-size:13px; font-weight:700;
  color:var(--tl-heading); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; transition:background .15s;
}
.faq-q:hover { background:var(--tl-off-white) }
.faq-icon {
  width:24px; height:24px; border-radius:50%;
  background:var(--tl-teal-light); color:var(--tl-teal);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; flex-shrink:0;
  transition:transform .2s; line-height:1;
}
.faq-q.open .faq-icon { transform:rotate(45deg) }
.faq-a {
  padding:0 18px 16px; font-size:12px; color:#5a6a80;
  line-height:1.7; display:none;
}
.faq-a.open { display:block }

/* ─── FINAL CTA ─────────────────────────────────────────── */
.final-cta-section {
  background:var(--tl-navy); padding:72px 0;
  text-align:center; position:relative; overflow:hidden;
  border-radius:10px;
}
/*.final-cta-section::before {
  content:''; position:absolute; top:-150px; left:50%;
  transform:translateX(-50%); width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,197,163,.1) 0%,transparent 65%);
}*/
.final-cta-inner { position:relative; z-index:1 }
.final-cta-section h2 {
  font-size:clamp(1.8rem,4vw,2.9rem); color:var(--tl-white);
  margin-bottom:16px;
}
.final-cta-section h2 em { color:var(--tl-teal); font-style:normal }
.final-cta-section p {
  font-size:18px; color:rgba(255,255,255);
  max-width:460px; margin:0 auto 36px; line-height:1.7;
}
.final-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.final-trust {
  font-size:12px; color:rgba(255,255,255,.7);
  margin-top:22px; line-height:1.7;
}

/* ─── FOOTER (matches timelabs footer) ─────────────────── */
footer {
  background:var(--tl-navy-dark);
  border-top:1px solid rgba(255,255,255,.07);
  padding:24px 0;
}
.footer-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-links {
  display:flex; gap:18px; flex-wrap:wrap;
}
.footer-links a {
  font-size:12px; color:rgba(255,255,255,.35);
  transition:color .15s;
}
.footer-links a:hover { color:rgba(255,255,255,.75) }
.footer-cities { font-size:12px; color:rgba(255,255,255,.25) }
.footer-copy { font-size:12px; color:rgba(255,255,255,.25) }

/* ─── ANIMATIONS ────────────────────────────────────────── */
.fade-up {
  opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.fade-up.show { opacity:1; transform:none }

/* ─── custom  ─────────────────────────────────────────── */
header .menu-main{background: transparent;}
header .navbar ul li .feather-home{color:#ff9e2c;}
header .navbar ul li a.menu-link {color: #ffffff !important;}
.brand-logo{display:none}
.brand-logo-2{display:block}
header.darkHeader .brand-logo {display: block;}
header.darkHeader .brand-logo-2 {display: none;}
header.darkHeader .navbar ul li a.menu-link {color: #333333 !important;}
header nav .header-btn{display:none;}
.header nav .header-btn{display:none;}
.talkexpert { white-space: nowrap; margin-left: 10px; display: flex; color: #ffff; border-radius: 50px; border: 2px solid #fff; min-width: 193px; padding: 5px 12px; font-weight: 500; column-gap: 5px; }
header.darkHeader .talkexpert {border-color: #333;color: #333;}
header.darkHeader .talkexpert img{ filter: brightness(0) saturate(100%);}
.trustedclients .owl-nav{display:none;}
.clientstestimonials .client-details h3{font-size:16px; text-align:left;}
.client-details img {width: 100px !important;object-fit: contain;}
.trustedclients .clientname p {text-align: left;margin-top: 10px;}
.clientstestimonials .about-client{align-items:flex-start;}
.trustedclients .client-card{padding:0px;}
.trustedclients{margin-top:15px;}
a.view-more {margin-left: 10px; color: #000;}
.connectWithDataTesti .owl-stage-outer {margin-bottom: 15px;}
.trustedclients {margin-top: 40px;}
div#connectdiv {display: none;}
.gpanel .panel-heading {font-size: 14px;font-weight: 500;color: var(--tl-heading);}
.faq-section .panel-body , .faq-section .panel-body li{font-size:14px;}
.faq-section .gpanel .panel-heading {color:#333;}
.menu li.menu-item:hover > a, header .navbar ul li a.menu-link.active{color:#ff9e2c !important}
.pricingBox.desktopView {margin-top: 50px;}
.faq-section .gpanel {margin-top: 50px;}
.modulename span{font: 500 18px / 5px "Poppins", sans-serif;}
.moduleHead b.head{font: 500 18px / 15px "Poppins", sans-serif;}
.modulename p, .moduleHead p{font: 400 12px / 14px "Poppins", sans-serif;}
.moduleHead{row-gap:0px;}
.pricingBodyDataInner > div{height:auto;}
.priceHead p{font-size:14px;}
.parentInner p{font-size:13px; line-height:normal;}
.pricingHeader > div, .pricingBodyDataInner > div{padding:1px 15px;}
.pricingBodyDataInner:last-child > div {border-bottom: 1px solid #eaeaea;}
header .nav-menu{max-width:1380px;}
iframe#kiwi-big-iframe-wrapper {display: none;}
.whatsappFramOpener {display: none;}
.connect-cta{margin-top:30px;}
.section-sub-own{font-size:14px; margin-bottom:20px; margin-left:auto; margin-right:auto;}
.parentHead > div:last-child, .pricingBodyDataInner > div:last-child{display:none;}

.full-layout{display:flex;justify-content:center; align-items:center; text-align:center}
.full-layout .hero-sub{max-width:100%; width:100%;}
.docheading {font-size: clamp(1.7rem, 1.9vw, 2.5rem); color:#2C2C2C; column-gap: 15px; display:flex;}
.docheading img{width: clamp(1.7rem, 1.9vw, 2.5rem);}
.hr-docs { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 15px; column-gap: 7px; margin-top:30px;}
.hr-docs li a img {width: 2.5rem;}
.hr-docs li a { border: 1px solid #E6F3FF; display: flex; align-items: center; column-gap: 7px; padding: 10px 10px; min-width: 300px; border-radius: 12px; color: #131927; font-size: 15px; max-width: 300px; white-space: nowrap; }
.hr-docs li {min-width: 300px; max-width: 300px;}
.hrdoc-logo .brand-section {background: transparent !important;}
.hr-docs li a:hover {color: #0F4F93; background: #E6F3FF;}
.hr-docs li a:hover img { filter: brightness(0) saturate(100%) invert(14%) sepia(71%) saturate(3872%) hue-rotate(201deg) brightness(97%) contrast(88%); }
.hrdoc-section {background: #F8F9FA; padding: 40px 0px 60px;}
.policydoc-section{padding: 40px 0px 60px;}
.banner-bredcurm { display: flex; color: #000; justify-content: flex-start; column-gap: 5px;flex-wrap:wrap;}
.banner-bredcurm li a:hover, .banner-bredcurm li a.active {color: #ff9e2c;}
.details-left-inner {background: #F8F9FA;padding: 1px 20px 15px; border-radius: 14px;}
.count-row ul {display: flex; align-items: center; column-gap: 13px;}
.count-row ul li i {color: #000;}
.count-row ul li {border-right: 1px solid #000; padding-right: 10px; line-height: normal;}
.count-row ul li:last-child {border-right: none;}
.details-mid h4 {color: #2C2C2C; margin-top: 3rem; margin-bottom: 2rem;}
.forum-box {border: 1px solid #F5D08D;background: #FFEFD3;border-radius: 10px;margin-top: 30px; display:flex; column-gap:15px;overflow:hidden; align-items:center;}
.lastupdate {display: flex;justify-content: flex-end;}
.forum-box h5 {font-size: 20px;font-weight: 500;color: #2C2C2C;}
.forum-box p{color:#2C2C2C}
.details-main {display: flex; column-gap: 25px;position:relative;}
.details-right {min-width: 360px;}
.details-right-inner {background: #F1F3F4;padding: 15px; border-radius: 10px;margin-bottom:15px;}
.similar-list li a {display: flex; align-items: center; column-gap: 10px; margin-bottom:15px; border-left: 2px solid transparent; padding: 5px;}
.similar-list li a p span {display: flex;font-size:12px;}
.similar-list li a p {margin: 0px;}
.similar-list li a p span.list-title {color: #2C2C2C; font-weight: 500; font-size:14px;}
.similar-list li a p span.list-date {color: #888888;}
.details-right-inner h3.docheading {margin-top: 5px; margin-bottom: 15px;}
.similar-list li a.active span.list-title, .similar-list li a:hover span.list-title {color: #0F4F93;}
.similar-list li a:hover img {filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(1418%) hue-rotate(192deg) brightness(97%) contrast(91%);}
.similar-list li a.active, .similar-list li a:hover {background: #fff; border-left: 2px solid #49A1FF;border-radius: 5px;}
.forum-right {min-width: 397px;margin-right: 0px;}
.forum-left {padding: 15px;}
.pricingBodyDataInner > div{min-height: 4.3rem;}
.micro-strip-text {text-align: center; max-width: 800px; margin-left: auto; margin-right: auto;}
.micro-strip-text h2{color:#fff !important;}
.modulename {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding-bottom: 10px !important;
}
.light-blue-btn{border: 1px solid #006ffa !important;}
.parentInner p{padding-left:48px !important}
.parent.active .priceHead p:after{left:18px !important}
.priceHead.active p, .priceHead.cursor:hover i, .priceHead.cursor:hover p, .priceHead.cursor i{color:#000;}
.modulename p {
    position: absolute;
    top: 36px;
}
.compareall {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
    .compareall a {
        color: #001659;
        text-decoration: underline;
        font-size: 20px;
        font-weight: normal;
    }
.pdf-editer {
    padding: 10px;
}
.details-left {
    width: 100%;
}
.pdfbox {
    border: 1px solid #dbdfe3;
    border-radius: 5px;
    margin-top:30px;
}
.pdfbox-inner {
    background: #f5f7f9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 10px;
}

.hrpolicymodal .modal-body {border: 1px solid #F8F9FA; border-radius: 15px; background:#FFEDDE}
.hrpolicymodal .modal-content {border-radius: 15px;}
.hrpolicymodal .modal-body h2 {color: #0A3A7C !important; font-size: 24px !important; position: relative;}
.hrpolicymodal .modal-body h2:after {content: ""; width: 100px; position: absolute; height: 2px; background: #FF9D2C; bottom: 10px;}
.hrpolicymodal .modal-body .form-group label {font: normal 500 15px / 20px "Poppins", sans-serif !important;}
.hrpolicymodal .contact-form input, .hrpolicymodal .contact-form select {border: 1px solid #DCDFE3 !important; border-radius: 10px; font-size:14px;}
.hrpolicymodal .country-mobile-code{display: flex;}
.hrpolicymodal .country-mobile-code select{border-right: 0 !important;border-radius: 10px 0px 0px 10px !important;padding-left:10px !important}
.hrpolicymodal .country-mobile-code input{width:100% !important; border-left: none !important; border-radius: 0px 10px 10px 0px !important;}
.hrpolicymodal .form-check {display: flex;align-items: center;column-gap: 10px;}
.hrpolicymodal .form-check .form-check-input { font-size: 11px !important; height: 17px !important; width: 17px !important; }
.hrpolicymodal .form-check .form-check-label {margin: 0px !important; font-size: 15px !important; font-weight: 500 !important;}
.hrpolicymodal span.policy {font-weight: 500 !important;}
.hrpolicymodal .modal-body .form-group label.is-invalid { margin-top: 3px; font-weight: 400 !important; font-size: 14px !important; }
form.contact-form .country-mobile-code input {width: 74.33% !important; display: inline-block;}
form.contact-form .country-mobile-code select{width:25% !important}
.hrpolicymodal .light-blue-btn{width: 100%;background: #0A3A7C !important;}
.hrpolicymodal .light-blue-btn:hover{color:#fff !important}
ul.similar-list {max-height: 375px;overflow: auto;}
.page-pera{font-size:16px;}
#webinarmodal button.close { background: #35e3ea; position: absolute; right: -6px; top: -10px; border-radius: 50px; padding: 10px; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.resiterbox { background: #031d65; width: 100%; display: block; margin-top: -1px; text-align: center; color: #fff; padding: 10px; }
.mobile-list-btn{display:none;}
.details-left .section-title {display: flex; align-items: center;column-gap:5px;margin-bottom:0px;}
.cta-navy:focus {color: #fff; border: none !important; outline: none;}
.docheading span span {font-weight: 600;text-decoration: underline; color: #0a397c;}
.pdf-editer iframe{border: none; border-radius: 8px; width:100%; height:1130px;}
/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media screen and (min-width: 991px) and (max-width: 1280px) {
    header .nav-menu {
        width: auto !important;
    }
}

@media(max-width:991px) {
    .parentHead > div:last-child, .pricingBodyDataInner > div:last-child{display:block;}
header .burger-line{background:#fff}
header.darkHeader .burger-line{background:#333}
.brand-section{padding:20px 0px 20px;}
.hero{padding:50px 0px 56px;}
.pricingBox.mobileView {margin-top: 30px;}
.pricingBox.mobileView .pricingHeader > div{row-gap:10px;}
.pricingBox.mobileView .moduleHead b.head {font: 500 20px / 34px "Poppins", sans-serif;}
.trustedclients .owl-nav { width: 100%;top: 40%;}
.trustedclients .owl-carousel .owl-nav button.owl-next, .trustedclients .owl-carousel .owl-nav button.owl-prev{width:25px; height:25px;font-size:20px;}
.trustedclients .owl-nav{display:flex}
.trustedclients .owl-dots{display:none}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{height:25px; width:25px;}
.testi-card{padding:22px 35px}
.plans-grid {display: flex !important; overflow-x: auto; margin-top:15px;}
.plan-card{min-width:260px;margin-top: 15px;}
.recommended-strip{justify-content:center !important;}
.plans-grid::-webkit-scrollbar {display: none;}
.plans-grid {scrollbar-width: none;  -ms-overflow-style: none;}
header .navbar ul li a.menu-link{ color: #0F4F93 !important;}
.talkexpert {position: absolute;right: 50px;}
.hero h1{line-height:normal;}
.details-right{display:none; position:absolute; top:12.7rem; right:0px;}
.hr-docs li a{font-size:14px;}
.hr-docs li a img {width: 2.3rem;}
.page-pera {font-size: 14px;}
.mobile-list-btn{display:block;}
.lastupdate {display: flex;justify-content: space-between; align-items: center; margin-bottom: 10px;}
.details-right-inner h3.docheading{display:none;}
.details-right-inner{box-shadow: 0px 5px 15px 5px rgb(0 0 0 / 8%);background:#fff;padding-right:0px;}
.similar-list li a img {width: 30px;}
.similar-list li a{margin-bottom:5px;}
.webinarbox{display:none;}
.details-right {min-width: 315px;}

.details-right:before{content: ""; position: absolute; right: 25px; transform: rotate(0deg); top: -23px !important; bottom: auto !important; }
.details-right:after{content: "";
    position: absolute;
    right: 25px;
    transform: rotate(0deg);
    bottom: auto !important;
   border: 12px solid transparent;
    border-bottom-color: #eee;
    top: -25px !important;

}
.pdf-editer::before{display:none;}
}

@media(max-width:960px) {
    .hero-layout { grid-template-columns:1fr; gap:40px }
  .hero-sub { max-width:100% }
    .talkexpert span{display:none}
    .talkexpert{min-width:52px;}
}
@media(max-width:700px){
    .section-sub{font-size:16px;}
    .cost-calc-sub{font-size:14px !important;}
   .hero-badge{font-size:11px;}
  .hero-stats { gap:20px }
  .hero-sub {font-size:16px; }
  .plans-grid { grid-template-columns:1fr }
  .micro-strip { flex-direction:column; text-align:center }
  .nav-links { display:none }
  .section-pad { padding:48px 0 }
  .faq-section .gpanel{margin-top:0px;}
  .btn-primary-lg, .hero-ctas .btn-ghost-white{padding: 14px 14px !important;}
  .comp-stat{padding:0px 15px;}
  .micro-strip-text p{font-size:14px;}
}

/* ─── EMPLOYEE COST CALCULATOR ──────────────────────────── */
.cost-calc-section {
  background: var(--tl-navy);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cost-calc-section::before {
  content: '';
  position: absolute; top: -160px; right: -100px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,197,163,.1) 0%, transparent 70%);
  pointer-events: none;
}
.cost-calc-section::after {
  content: '';
  position: absolute; bottom: -80px; left: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,197,163,.06) 0%, transparent 70%);
  pointer-events: none;
}
.cost-calc-inner {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto;
  text-align: center;
}
.cost-calc-inner .eyebrow { color: var(--tl-teal); justify-content: center }
.cost-calc-inner .eyebrow::before { background: var(--tl-teal) }
.cost-calc-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.2vw, 3.7rem);
  font-weight: 700; color: #fff;
  margin-bottom: 10px; line-height: 1.15;
}
.cost-calc-title span { color: var(--tl-teal) }
.cost-calc-sub {
  font-size: 20px; color: rgba(255,255,255);
  margin-bottom: 40px; line-height: 1.6;
}

/* the main input row */
.emp-input-row {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r3);
  padding: 6px 6px 6px 24px;
  margin-bottom: 28px;
  transition: border-color .2s;
}
.emp-input-row:focus-within {
  border-color: var(--tl-teal);
  background: rgba(0,197,163,.06);
}
.emp-input-label {
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,.5);
  white-space: nowrap; flex-shrink: 0;
}
.emp-number-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-head);
  font-size: 2rem; font-weight: 600; color: #fff;
  text-align: center; min-width: 80px; max-width: 160px;
  padding: 4px 8px;
  -moz-appearance: textfield;
}
.emp-number-input::-webkit-outer-spin-button,
.emp-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.emp-input-suffix {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.4);
  flex-shrink: 0; padding-right: 8px;
}
.emp-calc-btn {
  background: var(--tl-teal); color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border: none; border-radius: var(--r2);
  padding: 13px 24px; cursor: pointer;
  transition: all .18s; white-space: nowrap; flex-shrink: 0;
}
.emp-calc-btn:hover { background: var(--tl-teal-dark); transform: translateY(-1px) }

/* slider */
.emp-slider-wrap {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
}
.emp-slider-wrap input[type=range] {
  flex: 1; height: 5px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
}
.emp-slider-wrap input[type=range]::-webkit-slider-thumb {
  width: 22px; height: 22px;
  background: var(--tl-teal);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,197,163,.6);
}
.slider-tick {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.3); flex-shrink: 0;
  min-width: 36px; text-align: center;
}

/* results grid */
.cost-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media(max-width:600px) {
  .cost-results-grid { grid-template-columns: 1fr }
  .emp-input-row { padding: 6px 6px 6px 14px }
  .emp-number-input { font-size: 1.5rem }
  .details-right{top: 14.7rem;}
}
.cost-result-card {
  border-radius: var(--r2);
  padding: 18px 16px;
  text-align: center;
  transition: all .3s;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
}
.cost-result-card.recommended {
  background: rgba(0,197,163,.12);
  border-color: var(--tl-teal);
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(0,197,163,.2);
}
.cost-result-card.dim-card {
  opacity: .55;
}
.crc-plan {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px;
}
.cost-result-card.recommended .crc-plan { color: var(--tl-teal) }
.cost-result-card:not(.recommended) .crc-plan { color: rgba(255,255,255,.4) }
.crc-price {
  font-family: var(--font-head);
  font-size: 1.65rem; font-weight: 700; color: #fff;
  line-height: 1; margin-bottom: 4px;
  transition: all .3s;
}
.cost-result-card.recommended .crc-price { color: var(--tl-teal) }
.crc-period { font-size: 12px; color: rgba(255,255,255) }
.crc-per-emp { font-size: 11px; color: rgba(255,255,255); margin-top: 4px }
.crc-badge {
  display: inline-block; margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  background: var(--tl-teal); color: #fff;
  padding: 3px 10px; border-radius: 99px;
}
.crc-upgrade-note {
  font-size: 10px; color: rgba(255,255,255,.3);
  margin-top: 6px; line-height: 1.4;
}

/* recommended plan strip */
.recommended-strip {
  background: rgba(0,197,163,.1);
  border: 1.5px solid rgba(0,197,163,.3);
  border-radius: var(--r2);
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 0;
  transition: all .3s;
}
.rec-strip-left {
  display: flex; align-items: center; gap: 12px;
}
.rec-strip-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tl-teal); display: flex;
  align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.rec-strip-text { text-align: left }
.rec-strip-headline {
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2;
}
.rec-strip-detail {
  font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px;
}
.rec-strip-cta {
  background: var(--tl-teal); color: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  border: none; border-radius: var(--r2);
  padding: 12px 22px; cursor: pointer;
  transition: all .18s; white-space: nowrap; text-decoration: none;
  display: inline-block; flex-shrink: 0;
}
.rec-strip-cta:hover { background: var(--tl-teal-dark); transform: translateY(-1px) }